<!--
author:        hejiyang <silentmanager@163.com>
date:          2024-11-23 10:43:01
component:     orderDetail
Copyright © YourCompanyName All rights reserved
-->

<template>
  <el-drawer :model-value="modelValue" title="订单详情" :size="'50%'" @close="handleClose">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="订单信息" name="first">
        <!-- 客户信息 -->
        <el-divider direction="horizontal" content-position="left">客户信息</el-divider>
        <el-descriptions :border="true">
          <el-descriptions-item label="客户手机">{{
            detailInfo?.customerPhone || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="客户姓名">{{
            detailInfo?.customerName || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="详细地址">{{
            detailInfo?.address || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="客户类型">{{
            detailInfo?.customerType || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ detailInfo?.gender || '--' }}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{ detailInfo?.age || '--' }}</el-descriptions-item>
        </el-descriptions>

        <!-- 套餐信息 -->
        <el-divider content-position="left">套餐信息</el-divider>
        <el-card>
          <el-table :data="detailInfo?.packageInfo" style="width: 100%">
            <el-table-column label="商品名称" prop="packageName" />
            <el-table-column label="数量" prop="num" />
            <el-table-column label="箱数" prop="packageCount" />
            <el-table-column label="瓶数" prop="bottleCount" />
            <el-table-column label="套餐单价" prop="packagePrice" />
            <el-table-column label="套餐营业额" prop="packageTurnover" />
            <el-table-column label="套餐加价金额" prop="packageExtra" />
            <el-table-column label="运费加价金额" prop="shippingExtra" />
            <el-table-column label="预付款" prop="prepayment" />
            <el-table-column label="待收尾款" prop="pendingPayment" />
            <el-table-column label="套餐总金额" prop="packageTotal" />
            <el-table-column label="创建时间" prop="createTime" />
          </el-table>
        </el-card>

        <!-- 订单信息 -->
        <el-divider content-position="left">订单信息</el-divider>
        <el-descriptions :border="true">
          <el-descriptions-item label="录入部门">{{
            detailInfo?.departmentName || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="录入班组">{{
            detailInfo?.teamName || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="录入人">{{
            detailInfo?.creatorName || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="对接部门">{{
            detailInfo?.contactDepartmentName || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="对接班组">{{
            detailInfo?.contactTeamName || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="对接人">{{
            detailInfo?.contactName || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="发货方式">{{
            detailInfo?.deliveryMethod || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="订单备注">{{
            detailInfo?.orderNote || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            {{
              detailInfo?.orderStatus || '--'
            }}</el-descriptions-item>
        </el-descriptions>

        <!-- 发货信息 -->
        <el-divider content-position="left">发货信息</el-divider>
        <el-descriptions :border="true">
          <el-descriptions-item label="物流单号">{{
            detailInfo?.logisticNo || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="保价费">{{
            detailInfo?.guaranteeAmount || '--'
          }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="订单跟进备注" name="second">
        <el-button type="warning" @click="showDialog">添加备注</el-button>
        <el-table v-loading="loading" :data="remarkList" style="width: 100%">
          <el-table-column label="序号" width="80">
            <template #default="scope">
              {{ scope.$index + 1 + (queryParams.pageNo - 1) * queryParams.pageSize }}
            </template>
          </el-table-column>
          <el-table-column label="备注内容" prop="noteContent" />
          <el-table-column label="创建人" prop="creatorName" />
          <el-table-column label="创建时间" prop="createTime" />
          <el-table-column label="操作" width="300">
            <template #default="scope">
              <div style="display: flex">
                <el-button
                  v-hasPermi="['bms:order-note:delete']"
                  link
                  type="warning"
                  @click="handleDeleteRemark(scope.row)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination
          :total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="getRemarkList"
        />
      </el-tab-pane>
    </el-tabs>
    <!-- 备注弹窗 -->
    <OrderRemark
      :remark-id="orderDetailId"
      v-model:visible="isDialogVisible"
      @success="getDrawerAntOut"
    />
  </el-drawer>
</template>

<script setup lang="ts">
import {
  deleteOrderNote,
  getDetailOrderInfo,
  GetDetailOrderInfoRes,
  pageOrderNote
} from '@/api/order/all'
import OrderRemark from './orderRemark.vue'
const message = useMessage()
const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'success'): void // 添加 success 事件
}>()
const { modelValue, orderDetailId } = defineProps<{
  modelValue: boolean
  orderDetailId: number
}>()
const detailInfo = ref<GetDetailOrderInfoRes>()
const getDetailOrderInfoFn = async () => {
  try {
    const res = await getDetailOrderInfo({ id: orderDetailId })
    detailInfo.value = res
  } catch (e) {
    console.error(e)
  }
}
watch(
  () => modelValue,
  (newModelValue) => {
    if (newModelValue && orderDetailId) {
      getDetailOrderInfoFn()
    }
  }
)
const handleClose = () => {
  activeName.value = 'first'
  emit('update:modelValue', false) // 关闭抽屉
}

// ----------------------------- 备注弹窗状态 -----------------------------
const isDialogVisible = ref<boolean>(false) // 定义对话框可见性的状态
// 显示弹窗的处理函数
const showDialog = () => {
  isDialogVisible.value = true // 显示弹窗
}

//  ==================== 备注列表  ====================
const loading = ref(true) // 列表的加载中
const remarkList = ref([])
const total = ref(0) // 列表的总页数
// 分页
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10
})
const getRemarkList = async () => {
  loading.value = true
  try {
    const res = await pageOrderNote({
      ...queryParams,
      orderId: orderDetailId
    })
    remarkList.value = res.list
    total.value = res.total
    loading.value = false
  } catch (e) {
    loading.value = false
    console.error(e)
  }
}
const getDrawerAntOut = () => {
  getRemarkList()
  emit('success')
}
const handleDeleteRemark = async (row) => {
  try {
    await message.confirm('确认删除这条备注吗？')
    await deleteOrderNote({ id: row.id })
    message.success('删除成功')
    getRemarkList()
  } catch (e) {
    console.error(e)
  }
}
//  ==================== tab  ====================
const activeName = ref('first')
// 监听 activeName 的变化
watch(activeName, (newValue) => {
  if (newValue === 'first') {
    getDetailOrderInfoFn()
  }
  if (newValue === 'second') {
    getRemarkList()
  }
})
</script>
